<template>
    <div class="manage_content">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="用户昵称：">
                    <el-input v-model="searchData.ui_nickname" placeholder="用户昵称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content_table">
            <el-dialog :title="formtitle" :visible.sync="dialogFormVisible">
                <el-form ref="form" :label-width="formLabelWidth">
                    <!-- 下级人员详情 -->
                    <div v-if="formtitle == '下级人员详情'">
                        <el-form-item label="用户昵称:" v-for="item in form" :key="item.ui_nickname">
                            <span>{{item.ui_nickname}}</span>
                        </el-form-item>
                    </div>
                    <!-- 会员捐款详情 -->
                    <div v-else v-for="item in form" :key="item.ui_nickname">
                        <el-form-item label="会员昵称">
                            <span>{{item.ui_nickname}}</span>
                        </el-form-item>
                        <el-form-item label="捐款额度">
<<<<<<< HEAD
                            <span>{{item.utl_donation_amount}}</span>
                        </el-form-item>
                        <el-form-item label="祝福寄语">
                            <span>{{item.utl_greeting_message}}</span>
=======
                            <span>{{item.pud_amount}}</span>
                        </el-form-item>
                        <el-form-item label="祝福寄语">
                            <span>{{item.pud_greeting_message}}</span>
>>>>>>> b5e7354d9f7632bd015803079d8d3dd3a20f2b07
                        </el-form-item>
                        <el-form-item label="捐款时间">
                            <span>{{item.pud_created_time}}</span>
                        </el-form-item>
                        <el-form-item label="捐助项目的名称">
                            <span>{{item.pi_name}}</span>
                        </el-form-item>
                    </div>

                    <el-form-item>
                        <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <ul>
                <li v-for="item in tableData" :key="item.ui_id">
                    <header>会员信息</header>
                    <div class="table_msg">
                        <span class="headImg">
<<<<<<< HEAD
                            <img :src="item.ui_avatar"></a>
=======
                            <a :href="item.ui_avatar"></a>
>>>>>>> b5e7354d9f7632bd015803079d8d3dd3a20f2b07
                        </span>
                        <section>
                            <header>
                                <p>
                                    <span>用户昵称：{{item.ui_nickname}}</span>
                                    <span>用户性别：{{item.ui_gender |sex}}</span>
                                </p>
                                <p>
                                    <span>注册时间：{{item.created_at}}</span>
                                    <span>更新时间：{{item.updated_at}}</span>
                                </p>
                                <p>
                                    <span>邀请人昵称：{{item.inviter}}</span>
                                </p>
                            </header>
                            <footer>
                                <el-button type="text" @click="subordinatedetail(item)">下级人员详情</el-button>
                                <el-button type="text" @click="projectdetail(item)">捐款详情</el-button>
                            </footer>
                        </section>
                    </div>
<<<<<<< HEAD
                </li>
                <footer>
                    <el-pagination :page-sizes="pageSizes" :page-size="page.page_limit" layout="sizes, prev, pager, next" :total="pageTotal" @size-change="handleSizeChange" @current-change='changePage'>
                    </el-pagination>
                </footer>
=======

                </li>
>>>>>>> b5e7354d9f7632bd015803079d8d3dd3a20f2b07
            </ul>
        </div>
    </div>
</template>

<style scoped>
.manage_content {
    padding: 20px;
}

.search {
    padding-bottom: 20px;
}

.content_table ul li {
    border: 1px solid #ccc;
}

.content_table ul li .table_msg {
    display: flex;
    font-size: 1.2rem;
}

.content_table ul li>header {
    padding: 10px;
    background: #ccc;
    font-size: 1.5rem;
}

.content_table ul li section {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.content_table ul li section header {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content_table ul li section header p {
    flex: 1;
    display: flex;
}

.content_table ul li section header span {
    flex: 1;
}

.headImg {
    width: 150px;
    height: 150px;
    border-right: 1px solid #ccc;
}
<<<<<<< HEAD

.headImg img {
    width: 150px;
    height: 150px;
}
=======
>>>>>>> b5e7354d9f7632bd015803079d8d3dd3a20f2b07
</style>

<script src='../../directive/content/vip_manage.js'></script>


